<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" >
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <title>注册</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{/static/css/bootstrap.min.css}">
    <link rel="stylesheet" href="../static/css/fileinput.css" th:href="@{/static/css/fileinput.css}">
</head>
<body>
<div class="container-fluid">
    <div id="content" class="row">
        <div class="col-md-3">
            <a href="/">
                <img src="../static/img/loading.gif">
            </a>
        </div>
        <div class="col-md-6" style="padding-top: 150px">
            <div class="row justify-content-center ">
                <h2>注册</h2>
            </div>

            <form action="/userEnroll" method="post" class="bs-example bs-example-form" role="form" id="loginForm">
                <div class="form-group">
                    <label>用户名:</label>
                    <input id="username" name="username" type="text" class="form-control" placeholder="username">
                    <div id="noUsername" class="alert alert-danger alert-dismissible fade show" style="display:none">
                        <strong>用户名不能为空</strong>
                        <button id="noUserBtn" type="button" class="close" >&times;</button>
                    </div>
                </div>
                <br>
                <div class="form-group">
                    <label>手机:</label>
                    <input id="phone" name="phone" type="text" class="form-control" placeholder="phone">
                    <div id="noPhone" class="alert alert-danger alert-dismissible fade show" style="display:none">
                        <strong>手机格式不规范</strong>
                        <button id="noPhoneBtn" type="button" class="close" >&times;</button>
                    </div>
                </div>
                <br>
                <div class="form-group">
                    <label>密码:</label>
                    <input id="password" name="password" type="password" class="form-control" placeholder="password">
                    <div id="noPassword" class="alert alert-danger alert-dismissible fade show" style="display:none">
                        <strong>请输入密码</strong>
                        <button id="noPwdBtn" type="button" class="close" >&times;</button>
                    </div>
                </div>
                <br>
                <div class="form-group">
                    <label>确认密码:</label>
                    <input id="confirmPassword" name="confirmPassword" type="password" class="form-control" placeholder="confirmPassword">
                    <div id="noConfirmPassword" class="alert alert-danger alert-dismissible fade show" style="display:none">
                        <strong>请输入确认密码</strong>
                        <button id="noConfirmPwdBtn" type="button" class="close" >&times;</button>
                    </div>
                    <div id="notSame" class="alert alert-danger alert-dismissible fade show" style="display:none">
                        <strong>密码与确认密码不相同</strong>
                        <button id="notSameBtn" type="button" class="close" >&times;</button>
                    </div>
                </div>
                <br>
                <div class="form-group" style="margin-top: 2px">
                    <button id="submit" type="submit" class="btn btn-primary" style="width: 100%;">注册</button>
                    <span id="err" th:if="${not #strings.isEmpty(enrollMsg)}">
                            <div class="alert alert-danger alert-dismissible fade show" >
                                <strong th:text="${enrollMsg}"></strong>
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                            </div>
                        </span>
                    <span id="enrollSuccessMsg" th:if="${not #strings.isEmpty(enrollSuccessMsg)}">
                            <div  class="alert alert-success alert-dismissible fade show" >
                                <strong th:text="${enrollSuccessMsg}"></strong>
                                <button id="successBtn" type="button" class="close" data-dismiss="alert">&times;</button>
                            </div>
                        </span>
                </div>
            </form>
        </div>
        <div class="col-md-3">

        </div>
    </div>
</div>

<script type="text/javascript" src="../static/js/jquery-3.3.1.js" th:src="@{../static/js/jquery-3.3.1.js}"></script>
<script type="text/javascript" src="../static/js/bootstrap.bundle.min.js" th:src="@{../static/js/bootstrap.bundle.min.js}"></script>
<script type="text/javascript" src="../static/js/piexif.js" th:src="@{../static/js/piexif.js}"></script>
<script type="text/javascript" src="../static/js/fileinput.js" th:src="@{../static/js/fileinput.js}"></script>
<script type="text/javascript" src="../static/js/zh.js" th:src="@{../static/js/zh.js}"></script>
<script>
    $(function ()
    {
        $('#username').val('');
        $('#password').val('');
        $('#confirmPassword').val('');
        if(document.getElementById("noUsername"))
        {
            document.getElementById("noUsername").style.display="none";
        }
        if(document.getElementById("noPassword"))
        {
            document.getElementById("noPassword").style.display="none";
        }
        if(document.getElementById("noConfirmPassword"))
        {
            document.getElementById("noConfirmPassword").style.display="none";
        }
        if(document.getElementById("notSame"))
        {
            document.getElementById("notSame").style.display="none";
        }
    })
    $('#submit').click(function ()
    {
        var name=$.trim($('#username').val());
        var phone=$.trim($('#phone').val());
        var password=$.trim($('#password').val());
        var confirmPassword=$.trim($('#confirmPassword').val());
        if(name==""||name==null)
        {
            document.getElementById("noUsername").style.display="block";
            return false;
        }
        else if(!check(phone))
        {
            document.getElementById("noPhone").style.display="block";
            return false;
        }
        else if(password==""||password==null)
        {
            document.getElementById("noPassword").style.display="block";
            return false;
        }
        else if(confirmPassword==""||confirmPassword==null)
        {
            document.getElementById("noConfirmPassword").style.display="block";
            return false;
        }
        else if(password!=confirmPassword)
        {
            document.getElementById("notSame").style.display="block";
            $('#confirmPassword').val('');
            return false;
        }
        else
        {
            $('#loginForm').submit;
            return true;
        }
    })

    $('#noUserBtn').click(function ()
    {
        if(document.getElementById("noUsername"))
        {
            document.getElementById("noUsername").style.display="none";
        }
    })
    $('#noPhoneBtn').click(function ()
    {
        if(document.getElementById("noPhone"))
        {
            document.getElementById("noPhone").style.display="none";
        }
    })
    $('#noPwdBtn').click(function ()
    {
        if(document.getElementById("noPassword"))
        {
            document.getElementById("noPassword").style.display="none";
        }
    })
    $('#noConfirmPwdBtn').click(function ()
    {
        document.getElementById("noConfirmPassword").style.display="none";
    })
    $('#notSameBtn').click(function ()
    {
        if(document.getElementById("notSame"))
        {
            document.getElementById("notSame").style.display="none";
        }
    })
    $('#successBtn').click(function ()
    {
        document.getElementById("successBtn").style.display="none";
        window.location.href='/';
    })

    $('#username').click(function ()
    {
        if(document.getElementById("noUsername"))
        {
            document.getElementById("noUsername").style.display="none";
        }
        if(document.getElementById("err"))
        {
            document.getElementById("err").style.display="none";
        }
    })
    $('#phone').click(function ()
    {
        if(document.getElementById("noPhone"))
        {
            document.getElementById("noPhone").style.display="none";
        }
        if(document.getElementById("err"))
        {
            document.getElementById("err").style.display="none";
        }
    })
    $('#password').click(function ()
    {
        if(document.getElementById("noPassword"))
        {
            document.getElementById("noPassword").style.display="none";
        }
        if(document.getElementById("err"))
        {
            document.getElementById("err").style.display="none";
        }
    })
    $('#confirmPassword').click(function ()
    {
        if(document.getElementById("noConfirmPassword"))
        {
            document.getElementById("noConfirmPassword").style.display="none";
        }
        if(document.getElementById("notSame"))
        {
            document.getElementById("notSame").style.display="none";
        }
        if(document.getElementById("err"))
        {
            document.getElementById("err").style.display="none";
        }
    })
    //判断手机号
    function check(value)
    {
        var n = /(\d){11}/;
        var re = new RegExp(n);
        if (re.test(value))
        {
            return true;
        }
        else
        {
            return false;
        }
    }


    function locate(string)
    {
        window.open(string);
    }
</script>
</body>
</html>